<template>
    <div class="terrace_administrators_base">
        <div class="base_h">
            <div class="base_block flex flexR">
                <div class="base_block_title">
                    <span v-if="type > 0">*</span>真实姓名:
                </div>
                <div class="base_block_input">
                    <div v-if="type === 0"> {{detail.user_real_name}} </div>
                    <div v-else>
                        <el-input type="text" clearable placeholder="真实姓名"  v-model="detail.user_real_name"></el-input>
                    </div>
                </div>
            </div>
            <div class="base_block flex flexR">
                <div class="base_block_title">
                    <span v-if="type > 0">*</span> 用户名:
                </div>
                <div class="base_block_input">
                    <div v-if="type === 0"> {{detail.user_name}} </div>
                    <div v-else>
                        <el-input type="text" clearable placeholder="用户名"  v-model="detail.user_name"></el-input>
                    </div>
                </div>
            </div>
            <div class="base_block flex flexR">
                <div class="base_block_title">
                    <span v-if="type > 0">*</span>电话:
                </div>
                <div class="base_block_input">
                    <div v-if="type === 0"> {{detail.user_mobile}} </div>
                    <div v-else>
                        <el-input type="text" clearable placeholder="电话"  v-model="detail.user_mobile"></el-input>
                    </div>
                </div>
            </div>
            <div class="base_block flex flexR"  v-if="type > 0">
                <div class="base_block_title">
                    <span v-if="type > 0">*</span>密码:
                </div>
                <div class="base_block_input">
                    <div>
                        <el-input type="text" clearable placeholder="密码"  v-model="detail.user_password"></el-input>
                    </div>
                </div>
            </div>
            <div class="base_block flex flexR">
                <div class="base_block_title">
                    <span v-if="type > 0">*</span> 邮箱:
                </div>
                <div class="base_block_input">
                    <div v-if="type === 0"> {{detail.email}} </div>
                    <div v-else>
                        <el-input type="text" clearable placeholder=" 邮箱"  v-model="detail.email"></el-input>
                    </div>
                </div>
            </div>
<!--
            <div class="base_block base_block_select  flex flexR">
                <div class="base_block_title">
                    <span v-if="type > 0">*</span> 设定为管理员:
                </div>
                <div class="base_block_input">
                    <el-radio v-model="detail.is_admin" :label="0" aria-checked="{checked: 1==1}" :disabled="type == 0">否</el-radio>
                    <el-radio v-model="detail.is_admin" :label="1" :disabled="type == 0">是</el-radio>
                </div>
            </div>
-->
            <div class="base_block base_block_select  flex flexR">
                <div class="base_block_title">
                    <span v-if="type > 0">*</span> 状态:
                </div>
                <div class="base_block_input ">
                    <el-radio v-model="detail.status" :label="0" aria-checked="{checked: 1==1}" :disabled="type == 0">正常</el-radio>
                    <el-radio v-model="detail.status" :label="1" :disabled="type == 0">锁定</el-radio>
                </div>
            </div>
             <div class="base_block base_block_select  flex flexR"  v-if="detail.is_admin==0">
                <div class="base_block_title">
                    <span v-if="type > 0">*</span> 角色:
                </div>
                <div class="base_block_input ">
                    <div v-if="type === 0"> {{user_role_name}} </div>
                    <div v-else>
                         <el-select v-model="detail.role_id" placeholder="请选择对应角色" @change="changeRole($event)">
                            <el-option
                                v-for="item in roles"
                                :selected="detail.role_id == item.role_id"
                                :key="item.role_id"
                                :label="item.role_name"
                                :value="item.role_id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            
        </div>

        <!-- 新增、编辑的时候还有下面的按钮，用于提交数据 -->
        <el-row style="margin-left:40px;margin-top:20px"  v-if="type > 0">
            <el-button type="primary" @click="submitUser">保存</el-button>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "Terrace_adminstratorsBase",
        props:{
            type:{              //编辑类型：0：查看、1：新增、2：编辑
                type: Number,
                default: 0
            },
            admin_user_id:0,
            roles:{             //简易角色列表
                type: Array,
                default: []
            }
    },
    data(){
        return {
            user_role_name:'',          //角色名称
            detail:{
                role_id: '',             //角色ID
                user_real_name: '',     //真实姓名
                user_name: '',          //用户名
                user_mobile: '',        //电话
                user_password: '',      //密码
                email : '',             //邮箱
                is_admin : 0,           //是否是管理员；0：否、1：是
                status : 0,             //状态；0：正常、1：锁定  
            },
            current_path: '',           //当前路由         

        }
    },
    computed: {
        getNavList(){
            return  this.$store.state.showNavList;
        }
    },
    mounted(){
        this.$setRouteTitle();
        //加载个人数据
        console.log('admin_user_id', this.admin_user_id);
        if(this.type != 1){       //查看、编辑时，需要先获取管理员详情
            this.getDetail(this.admin_user_id);
        }
        this.current_path = this.$route.path;
    },
    activated(){
        let flag = false;
        for(let val of this.getNavList){
            if(val.path == this.current_path){
                flag = true;
            }
        }
        if(!flag){
            this.$setRouteTitle();
        }   
        if(this.type != 1){       //查看、编辑时，需要先获取管理员详情
            this.getDetail(this.admin_user_id);
        }
    },
    deactivated(){
        let flag = false;    //是否保留数据
        for(let val of this.getNavList){
        if(val.path == this.current_path){
            flag = true;
        }
        }
        if(!flag){
            this.detail = {
                role_id: '',             //角色ID
                user_real_name: '',     //真实姓名
                user_name: '',          //用户名
                user_mobile: '',        //电话
                user_password: '',      //密码
                email : '',             //邮箱
                is_admin : 0,           //是否是管理员；0：否、1：是
                status : 0,             //状态；0：正常、1：锁定  
            }
        }
    },
    
    methods:{
        getDetail(admin_user_id){
            this.$raxios.post(this.$mapapi.adminUserDetail,{data:{admin_user_id}}).then(res => {
                if(res.code != 200)     return  Promise.reject(res.msg);
                this.detail.status = res.data.status;
                this.detail.user_real_name = res.data.user_real_name;
                this.detail.user_mobile = res.data.user_mobile;
                this.detail.user_name = res.data.user_name;
                this.detail.role_id =  res.data.get_user_role ? res.data.get_user_role.admin_role_id : '';
                this.detail.email = res.data.email;
                this.detail.is_admin = res.data.is_admin;
                if(this.type == 0)      this.user_role_name = res.data.roles[0].role_name;
            })
            .catch(res => {
                this.$message.error(res);
            });
        },
        submitUser(){
            if(this.type == 1 && this.detail.user_password == ''){
                this.$message.error('密码必填');
                return;
            }
            if(this.detail.user_real_name == ''){
                this.$message.error('真实姓名必填');
                return;
            }    
            if(this.detail.user_name == ''){
                this.$message.error('用户名必填');
                return;
            }
            if(this.detail.user_mobile == ''){
                this.$message.error('电话必填');
                return;
            } 
            if(this.detail.email == ''){
                this.$message.error('邮箱必填');
                return;
            }
            if(this.detail.role_id == ''){
                this.$message.error('角色必选');
                return;
            }
            this.$emit('submitRole',this.detail);
        },
        changeRole(select_role_id){
            this.detail.role_id = select_role_id;
        }
        
    }
    

    }
</script>

<style  lang="less" :scope="true" src="@/style/terrace/terrace_administrators/terrace_administrators_base.less">

</style>